<template>
    <div class="brand">
        <h3 class="title">专题精选</h3>
        <van-swipe :loop="false" :width="300" :show-indicators="false" :autoplay="3000">
            <van-swipe-item v-for="item in topicList" :key="item.id" class="box">
                <img :src="item.item_pic_url" alt="">
                <h2>{{item.title}}<span>{{item.price_info | RMBformat}}</span></h2>
                <p>{{item.subtitle}}</p>
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        methods: {},
        props: ["topicList"]
    }
</script>

<style lang="less" scoped>
    .brand {
        background-color: #fff;
        margin-top: .2rem;
        margin-bottom: .2rem;

        .title {
            text-align: center;
            height: .5rem;
            line-height: .5rem;
            font-size: .2rem;
        }

        .box {
            margin-right: 15px;
            height: auto;
            padding-bottom: 10px;
            background-color: #fff;

            img {
                width: 100%;
                height: 2rem
            }

            h2 {
                line-height: 40px;
                font-size: 16px;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                width: 90%;

                span {
                    color: darkred;
                }
            }

            p {
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                width: 90%;
                font-size: 14px;
                color:#333
            }
        }

    }
</style>